<template>
	<view class="details_block">
	  <view class="details_nav" v-for="item in europe" :key="item.country" @click="$emit('countryList', item.country)">
	    {{ item.country }}
	  </view>
	</view>
</template>

<script>
	export default {
		name:"country",
		props:{
			europe:{
				type:Array
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.details_block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 280rpx;
  box-sizing: border-box;
  padding: 20rpx 40rpx 80rpx;
  background-color: #f2f2f2;
}

.details_nav {
  width: max-content;
  height: 40rpx;
  padding: 10rpx 28rpx;
  border-radius: 60rpx;
  border: 2rpx solid #cdcdcd;
  background-color: #f9f9f9;
  margin: 0 36rpx 30rpx 0;
  font-size: 28rpx;
  box-shadow: 10rpx 10rpx 0 #cdcdcd;
}


</style>
